<template>
    
    
    <el-card class="!border-none" shadow="never">
        
        
        <div class=" flex flex-1 flex-row">
            <el-form ref="formRef" class="-mb-4 " :model="queryParams" inline>
                
                <el-form-item label="管理员">
                    <el-input
                        class="w-64"
                        v-model="queryParams.username"
                        placeholder="用户编号/昵称/手机号码"
                        clearable
                        @keyup.enter="resetOnePage"
                    />
                </el-form-item>
                
                
                <el-form-item label="来源IP">
                    <el-input
                        class="w-64"
                        placeholder="请输入"
                        v-model="queryParams.ip"
                        clearable
                        @keyup.enter="resetOnePage"
                    />
                </el-form-item>
    
    
    
                <el-form-item label="访问时间" >
        
                    <date-picker
                        v-model:startTime="queryParams.startTime"
                        v-model:endTime="queryParams.endTime"
                    />
                </el-form-item>
    
    
    
                <el-form-item label="访问链接">
                    <el-input
                        class="w-64"
                        placeholder="请输入"
                        v-model="queryParams.url"
                        clearable
                        @keyup.enter="resetOnePage"
                    />
                </el-form-item>

            </el-form>
            
            <div class="flex-1  flex flex-row-reverse">
                <el-button class="mx-2" type="primary" @click="getPageLists">查询</el-button>
                <el-button class="mx-2" @click="resetParams">重置</el-button>
            </div>
        </div>
        
        
        <el-card class="!border-none mt-4" shadow="never" v-loading="pagerData.loading">
            <div>
                <el-table :data="pagerData.lists" size="large">
                    <el-table-column label="记录ID" prop="id"/>
                    <el-table-column label="操作" prop="title" min-width="120"/>
                    <el-table-column label="管理员" prop="username" min-width="120"/>
                    
                    
                    <el-table-column label="访问链接" prop="url" min-width="160"/>
                    <el-table-column label="访问方式" prop="type" min-width="100"/>
                    <el-table-column label="来源IP" prop="ip" min-width="160"/>
                    <el-table-column label="错误信息" prop="error" min-width="160"/>
                    <el-table-column label="执行耗时(毫秒)" prop="taskTime" min-width="100"/>
                    <el-table-column label="日志时间" prop="createTime" min-width="180"/>
                </el-table>
            </div>
            
            
            <div class="flex mt-4 justify-end">
                <pagination v-model="pagerData" @change="getPageLists"/>
            </div>
        </el-card>
    
    
    </el-card>

</template>

<script lang='ts' setup>

// 查询表单
import {usePagerManager} from "@/manager/base/PagerManager";
import {systemLogLists} from "@/api/setting/system";

const queryParams = reactive({
    username: '',
    url: '',
    ip: '',
    type: '',
    startTime: '',
    endTime: ''
})


/**
 *
 * 获取日志信息
 */
const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: systemLogLists,
    params: queryParams
})


onMounted(() => {
    getPageLists()
})

</script>

<style lang="scss" scoped>

</style>